<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>我的</title>
    <link rel="stylesheet" href="/business/mescroll/mescroll.min.css">
    <link rel="stylesheet" href="/business/css/common.min.css">
    <script src="/js/jquery-1.11.1.min.js"></script>
    <script>
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    </script>
</head>
<body class="my_page">
<div class="information">
    <div class="clearfix user_msg">
        <div>
            {{--<img src="/business/images/tou-xiang.png" alt="">--}}
            <img src="{{ $info['wx_userinfo']['headimgurl'] ? $info['wx_userinfo']['headimgurl']: '/business/images/tou-xiang.png' }}" alt="">
        </div>
        <div class="user_name">
            <p>{{ $info['name'] }}</p>
            {{--<p>邀请码：{{ $info['invitation_code'] }}</p>--}}
        </div>
        @if($perfix == 'wap')
            <i class="exit" onclick="outBtn()"></i>
        @endif
    </div>
    <ul class="list_nav nav clearfix">
        <li onclick="loanRequire(this)" class="on active" i="0">
            <p class="num">{{ $info['apply']?$info['apply']:0 }}</p>
            <p class="state">意向中</p>
        </li>
        <li onclick="loanRequire(this)" i="1">
            <p class="num">{{ $info['success']?$info['success']:0 }}</p>
            <p class="state">已报名</p>
        </li>
        <li onclick="loanRequire(this)" i="2">
            <p class="num">{{ $info['refused']?$info['refused']:0 }}</p>
            <p class="state">已拒绝</p>
        </li>
    </ul>
</div>
<div id="mescroll0" class="mescroll">
    {{--id可以改,而"mescroll"的class不能删--}}
    <ul class="order_list" id="dataList0">
    </ul>
</div>
<div id="mescroll1" class="mescroll  none">
    <ul class="order_list none" id="dataList1">
    </ul>
</div>
<div id="mescroll2" class="mescroll  none">
    <ul class="order_list none" id="dataList2">
    </ul>
</div>

<div class="out_box none">
    <div class="content">
        <div class="out">退出登录</div>
        <div class="clearfix out_btn">
            <p onclick="cancelOut()">取消</p>
            <p onclick="confirmOut()">确定</p>
        </div>
    </div>
</div>
@include('Layouts.footer')
<script src="/business/js/base.js"></script>
<script src="/business/js/common.js"></script>
<script src="/business/mescroll/mescroll.min.js"></script>
<script>
    $(function(){
        var curNavIndex=0;//首页0; 奶粉1; 面膜2; 图书3;
        var mescrollArr=new Array(3);//4个菜单所对应的4个mescroll对象
        //初始化首页
        mescrollArr[0]=initMescroll("mescroll0", "dataList0");

        /*初始化菜单*/
        $(".list_nav li").click(function(){
            var i=Number($(this).attr("i"));
            if(curNavIndex!=i) {
                //更改列表条件
                $(".nav .active").removeClass("active");
                $(this).addClass("active");
                //隐藏当前列表和回到顶部按钮
                $("#mescroll"+curNavIndex).hide();
                mescrollArr[curNavIndex].hideTopBtn();
                //显示对应的列表
                $("#mescroll"+i).show();
                //取出菜单所对应的mescroll对象,如果未初始化则初始化
                if(mescrollArr[i]==null){
                    mescrollArr[i]=initMescroll("mescroll"+i, "dataList"+i);
                }else{
                    //检查是否需要显示回到到顶按钮
                    var curMescroll=mescrollArr[i];
                    var curScrollTop=curMescroll.getScrollTop();
                    if(curScrollTop>=curMescroll.optUp.toTop.offset){
                        curMescroll.showTopBtn();
                    }else{
                        curMescroll.hideTopBtn();
                    }
                }
                //更新标记
                curNavIndex=i;
            }
        })

        /*创建MeScroll对象*/
        function initMescroll(mescrollId,clearEmptyId){
            localStorage.clear();
            //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
            var mescroll = new MeScroll(mescrollId, {
                //下拉禁用
                down: {
                    use:true,
                    auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
  //                callback: downCallback, //下拉刷新的回调
                    callback: function () {
                        setTimeout(function () {
                            mescroll.endSuccess();
                        },2000);
                    },
                    htmlContent:'<div style="text-align: center" "><img style="width: 100px;margin-bottom: -6%;display: inline-block" src="/business/mescroll/img/loading.gif"><p>&nbsp;&nbsp;加载中...</p></div>'
                },
                //上拉加载的配置项
                up: {
                    callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    toTop:{ //配置回到顶部按钮
                        src:'/business/mescroll/img/mescroll-totop.png',
                    },
                    htmlLoading:'<div style="text-align: center" "><img style="width: 100px;margin-bottom: -6%;display: inline-block" src="/business/mescroll/img/loading.gif"><p>&nbsp;&nbsp;加载中...</p></div>'
                },
                htmlNodata:'<p class="upwarp-nodata"> -- 没有更多数据了 -- </p>',
            });
            mescroll.setPageSize(Number(10));
            return mescroll;
        }

        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function getListData(page){
            //联网加载数据
            var dataIndex=curNavIndex; //记录当前联网的nav下标,防止快速切换时,联网回来curNavIndex已经改变的情况;

            getListDataFromNet(dataIndex, page.num, page.size, function(pageData){
                var total = localStorage.getItem('total_order_page_'+dataIndex);

                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //后台接口有返回列表的总页数 totalPage
                mescrollArr[dataIndex].endByPage(pageData.length, total); //必传参数(当前页的数据个数, 总页数)

                //设置列表数据
                setListData(pageData,dataIndex);
            }, function(){
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescrollArr[dataIndex].endErr();
            });
        }

        /*设置列表数据
         * pageData 当前页的数据
         * dataIndex 数据属于哪个nav */
        function setListData(pageData,dataIndex){

            console.log(pageData);
            var listDom=document.getElementById("dataList"+dataIndex);
            for (var i = 0; i < pageData.length; i++) {
                var pd=pageData[i];
                var str=' <li >'+
                        ' <div class="liBox">'+
                        '<div class="head clearfix">'+
                        '<i>'+pd.product_name+'</i>'+
                        '<div>'+pd.userinfo.customer+'</div>'+
                        '<p>'+check(pd.status)+'</p>'+
                        '<span class="c1"></span>'+
                        '<span class="c2"></span>'+
                        '</div>'+
                        '<div class="order_msg">'+
                        '<div class="clearfix">'+
                        '<span>联系电话</span>'+
                        '<p>'+pd.userinfo.phone+'</p>'+
                        '</div>'+
                        '<div class="clearfix">'+
                        '<span>身份证号</span>'+
                        '<p>'+pd.userinfo.idcard+'</p>'+
                        '</div>'+
                        '<div class="clearfix">'+
                        '<span>家长姓名</span>'+
                        '<p>'+pd.userinfo.parentName+'</p>'+
                        '</div>'+
                        '<div class="clearfix">'+
                        '<span>家长电话</span>'+
                        '<p>'+pd.userinfo.parentPhone+'</p>'+
                        '</div>'+
                        '</div>'+
                        '</div>';
                        if(dataIndex == 1){
                            str += '<div class="order_detail on shadow">'+
                            '<p class="title">报名信息</p>'+
                            '<div class="list">'+
                            '<p>报名专业：'+pd.confirm_loan['product_name']+'</p>'+
                            '<p>报名缴费：'+pd.confirm_loan['loan_amount']+'</p>'+
                            '<p>报名时间：'+pd.confirm_loan['time']+'</p>'+
                            '</div>'+
                            '<p class="open_close" onclick="openClose(this)">'+
                            '<span></span>'+
                            '</p>'+
                            '</div>'
                        }else if(dataIndex == 2){
                            str += '<div class="order_detail on shadow">'+
                            '<p class="title">报名信息</p>'+
                            '<div class="list">'+
                            '<p>退款原因：'+pd.reason+'</p>'+
                            '<p>操作人员：'+pd.managerName+'</p>'+
                            '<p>退单时间：'+pd.updated_at+'</p>'+
                            '</div>'+
                            '<p class="open_close" onclick="openClose(this)">'+
                            '<span></span>'+
                            '</p>'+
                            '</div>'
                        }
                        str += '</li>';
                $('#dataList'+dataIndex).append(str);
                orderState();
            }
        }
        function check(status){
            var str = '';
            if(status ===0){
                str = '申请中';
            }else if(status ===1)
            {
                str = '已报名';
            }else if(status === -1)
            {
                str = '已退单';
            }
            return str;
        }
        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
            //延时一秒,模拟联网
            var url = '';
            if(localStorage.getItem('url_order_'+curNavIndex)){
                url = localStorage.getItem('url_order_'+curNavIndex)
            }else {
                url = '/{{$perfix}}/member/list?curNavIndex=' + curNavIndex + '&num=' + pageNum + '&size=' + pageSize;
            }
            setTimeout(function () {
                $.ajax({
                    type: 'post',
                    url: url,
                    dataType: 'json',
                    data:{type:curNavIndex,num:pageNum,size:pageSize},
                    success: function(res){
                        $(".active .num").text(res.data.total);
                        localStorage.setItem('total_order_page_'+curNavIndex,res.data.last_page);
                        localStorage.setItem('per_order_page_'+curNavIndex,res.data.per_page);
                        //下一页
                        if(res.data.next_page_url){
                            localStorage.setItem('url_order_'+curNavIndex,res.data.next_page_url+'&type='+curNavIndex);
                        }else{
                            localStorage.setItem('url_order_'+curNavIndex,'none');
                        }
                        var listData=res.data.data;
                        //回调
                        successCallback(listData);
                    },
                    error: errorCallback
                });
            },500)
        }
    });
</script>

</body>
</html>